<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 事件处理函数绑定方式1 -->
    <!-- <button onclick="console.log(this, event)">计数1</button>

    <button onclick="btnClickHandler(this, event)">计数2</button>
    <script>
      // 如果你想在函数内拿到 事件对象和按钮（标签）
      function btnClickHandler(p1, p2) {
        console.log(p1);
        console.log(p2);
        // 总结：p1是正确的this，是按钮本省。p2是正确的event，是事件对象本身

        // 注意这里的函数体内的this，
        console.log(this);
        // 注意这里的函数体内的event
        console.log(event);
        // 总结：在函数的执行上下文中，魔法参数this的指向发生了变化，event没有变化
      }
    </script>

    <button onclick="btnClickHandler({a: 1}, this, event)">计数3</button>
    <script>
      function btnClickHandler(p1, p2, p3) {
        console.log(p1); // 额外参数
        console.log(p2); // 按钮
        console.log(p3); // 事件对象
        // 总结：p1,p2,p3都是预期正确的值
      }
    </script> -->

    <!-- 事件处理函数绑定方式2 -->
    <!-- <button id="btn-003">计数3</button>
    <script>
      const button = document.getElementById('btn-003');
      button.onclick = function (event) {
        console.log(this);
        console.log(event);
      };
      button.onclick = function (event) {
        console.log(123);
      };
    </script> -->

    <!-- 事件处理函数的绑定方式3 -->
    <button id="btn-004">计数4</button>
    <script>
      const button = document.getElementById('btn-004');

      function onClick1(event) {
        console.log('onClick1');
        console.log('onClick1 this', this);
        console.log('onClick1 event', event);
      }
      function onClick2(event) {
        console.log('onClick2');
        console.log('onClick2 this', this);
        console.log('onClick2 event', event);
      }
      button.addEventListener('click', onClick2);
      button.addEventListener('click', onClick1);
    </script>
  </body>
</html>
